<template>
	<div class="front positions">
		<Header></Header>
		<div class="">
			<div class="mianbao docWidth">
				<span class="btn hover" @click="$router.push('/front-storeCenter')">
					< 返回</span>
			</div>
			<div class="main">
				<div class="content">
					<div style="font-size: 15px;">云仓名称：{{ $route.query.name }}</div>
					<el-table ref="table" v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id" style="width: 100%;">
						<el-table-column label="序号" type="index" align="center"/>
						<el-table-column label="月份" prop="createTime" align="center" />
						<el-table-column label="产品编码" prop="productSkuIdentifier" align="center" />
						<el-table-column label="类别" prop="categoryName" align="center" />
						<el-table-column label="名称" prop="productName" align="center" />
						<el-table-column label="规格" prop="productSkuName" align="center" />
						<el-table-column label="单位" prop="unit" align="center" />
						<el-table-column label="温度" prop="temperature" align="center" />
						<el-table-column label="湿度" prop="humidity" align="center" />
					</el-table>
					<Pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
						@pagination="getList" />
							</div>
				</div>
			<!-- <div class="storeHtml">
				<img style="width: 100%;" src="../../../assets/front-img/positions.jpg">
			</div> -->
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/views/front/components/Footer";
	import Header from "@/views/front/components/Header";
	import waves from '@/directive/waves' // waves directive
	import Pagination from '@/components/Pagination'
	import { getFinancialStatistics } from '@/api/store'
	export default {
		directives: { waves },
		components: {
			Footer,
			Header,
			Pagination,
		},
		data() {
			return {
				list: [],
				total: 0,
				listLoading: false,
				listQuery: {
					depotId: '',
					type: 2,
					pageNo: 1,
					pageSize: 20
				},
			};
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
      this.listLoading = true
      getFinancialStatistics(this.listQuery).then(response => {
        this.list = response.list || []
        this.total = response.totalCount
        this.listLoading = false
      })
    },
		}
	};
</script>
<style lang="scss">
	.positions {
		.storeHtml {
			text-align: center;

			img {
				max-width: 100%;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.positions {
		.mianbao {
			height: 60px;
			line-height: 60px;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 300;
			color: #000000;
			// padding-left: 40px;
		}

		.banner {
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			background-image: url(../../../assets/front-img/banner_yc.png);
			height: 328px;

			&.banner2 {
				background-image: url(../../../assets/front-img/banner2_yc.png);
				height: 200px;
				margin-bottom: 10px;
			}
		}

		.title {
			text-align: center;
			position: relative;
			padding: 20px 0 35px;
			font-size: 24px;

			a {
				position: absolute;
				left: 14px;
				line-height: 30px;
				top: 50%;
				margin-top: -15px;
				font-size: 14px;
			}

			.more {
				cursor: pointer;
				position: absolute;
				right: 14px;
				line-height: 30px;
				top: 50%;
				margin-top: -15px;
				font-size: 14px;
				color: #666;
			}

			&:after {
				content: "";
				width: 30px;
				height: 4px;
				background: #965f29;
				position: absolute;
				left: 50%;
				margin-left: -15px;
				bottom: 23px;
			}
		}
	}

	.main {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;

		.content {
			width: 1300px;
		}
	}
</style>
